<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易拖拽</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #div1{
            width: 400px;
            height: 280px;
            position: absolute;
            border-radius: 5px;
           margin-left: auto;
           left: 500px;
            top: 200px;
        }
        #user{
            display: block;
            width: 100%;
            height: 43px;
            background: url("images/name.png") no-repeat;
            padding-left:50px ;
            margin: 0 auto;
          border-style: none  ;
            border: solid 1px lightgray;



        }
        #password{
            display: block;
            width:100%;
            height: 43px;
            background: url("images/lock.png") no-repeat;
            padding-left:50px ;
            margin: 10px auto;
            border-style: none  ;
            border: solid 1px lightgray;

        }

    </style>
</head>
<body style="background: #f5f5fa">
<div id="div1"style="background: white">



    <!--上-->
<div style="height: 60px;font-size: 20px;line-height: 60px;text-align: center;background: url('images/800.jpg') -30px -10px no-repeat"></div>
   <!-- 下-->
    <form action=""style="padding: 20px;width: 80%;margin: 0 auto;position: relative">
        <input type="text" id="user" placeholder="请输入名字">
        <input type="password" id="password" placeholder="请输入密码">
        <label for=""><input type="checkbox">记住密码!</label>&nbsp;&nbsp;&nbsp;
        <a href="">忘记密码</a>
        <a href="注册框.html"class="pull-right">立即注册</a>
        <br>
        <input type="button"id="check" value="登录"style="display: block;width: 100%;border: none;background: rgba(78, 190, 251, 1);height: 30px;border-radius:5px;margin-top: 15px">
    </form>
</div>
<script>
    window.onload=function () {

        var oDiv=document.getElementById('div1');
        var disX=0;
        var disY=0;
        oDiv.onmousedown=function (ev) {
            var oEvent=ev||Event;
            disX=oEvent.clientX-oDiv.offsetLeft;
            disY=oEvent.clientY-oDiv.offsetTop;
            document.onmousemove=function (ev) {
                var oEvent=ev||Event;
                oDiv.style.left=oEvent.clientX-disX+'px';
                oDiv.style.top=oEvent.clientY-disY+'px';
            };
            oDiv.onmouseup=function (ev) {
                document.onmousedown=null;
                document.onmousemove=null;
            }
        }


    }
</script>
</body>
</html>